<template>
	<view class="page">
		<swiper class="swiper" circular :current="currentIndex" @change="swiperChange">
			<swiper-item v-for="(item, index) in classlist" :key="item._id">
				<view class="swiper-item">
					<image v-if="readImgIndexs.includes(index)" @click="maskChange" class="image" lazy-load :src="changePic(item.smallPicurl)"
						mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="mask" v-show="maskState">
			<navigator class="back" open-type="navigateBack" :style="{top:getStatusBarHeight()+'px'}">
				<uni-icons type="back" color="white" size="20"></uni-icons>
			</navigator>
			<view class="count">
				{{1+parseInt(currentIndex)}}/{{classlist.length}}
			</view>
			<view class="time">
				<uni-dateformat :date="Date.now()" format="hh:mm" />
			</view>
			<view class="date">
				<uni-dateformat :date="Date.now()" format="MM月dd日" />
			</view>
			<view class="footer">
				<view @click="handleInfoOpen">
					<uni-icons class="icon" type="info" size="25"></uni-icons>
					<view class="text">信息</view>
				</view>
				<view @click="handleRateOpen">
					<uni-icons class="icon" type="star" size="25"></uni-icons>
					<view class="text">评分</view>
				</view>
				<view @click="handleDownload">
					<uni-icons class="icon" type="download" size="25"></uni-icons>
					<view class="text">下载</view>
				</view>
			</view>
		</view>
		<uni-popup ref='infoPopupRef' type="bottom">
			<popupInfoVue @close="handleInfoOpen" :info="classlist[currentIndex]"></popupInfoVue>
		</uni-popup>
		<uni-popup ref='ratePopupRef'>
			<popupRateVue @close="handleRateOpen" :info="classlist[currentIndex]" ></popupRateVue>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight
	} from '@/utils/system';
	import popupInfoVue from './child-popups/popup-info.vue'
	import popupRateVue from './child-popups/popup-rate.vue'
import { apiDowloadWall } from '@/service/apis';
	const props = defineProps({
		current: {
			type: String,
			default: 0
		}
	})
	const infoPopupRef = ref(null)
	const ratePopupRef = ref(null)
	const maskState = ref(true)
	const classlist = uni.getStorageSync('classlist') || []
	const currentIndex = ref(props.current)
	const readImgIndexs = ref([])
	
	const changePic = (url) => {
		return url.replace('_small.webp', '.jpg')
	}
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		changeReadImgIndexs(currentIndex.value)
	}
	onMounted(() => {
		changeReadImgIndexs(parseInt(props.current))
	})
	const changeReadImgIndexs = (index) => { // 改变预读图片
		const arr = [
			index===0?classlist.length-1:index-1, // 上一个
			index,
			index===classlist.length-1?0:index+1 // 下一个
		]
		readImgIndexs.value = Array.from(new Set([...readImgIndexs.value,...arr]))  // 去重
	}
	
	const maskChange = () => {
		maskState.value = !maskState.value
	}
	const handleInfoOpen = (open = true) => {
		if (open) {
			infoPopupRef.value.open()
		} else {
			infoPopupRef.value.close()
		}
	}
	const handleRateOpen = (open = true) => {
		if (open) {
			ratePopupRef.value.open()
		} else {
			ratePopupRef.value.close()
		}
	}
	const handleDownload = () => {
		const currentInfo = classlist[currentIndex.value]
		// #ifndef H5
		uni.getImageInfo({
			src: changePic(currentInfo.smallPicurl),
			success: (res) => {
				uni.saveImageToPhotosAlbum({
					filePath: res.path,
					success: () => {
						uni.showToast({
							title: '保存成功，请到相册查看',
							icon: 'none'
						})
						apiDowloadWall({
							classid: currentInfo.classid,
							wallId: currentInfo._id
						})
					},
					fail: (res) => {
						if(res.errMsg === 'saveImageToPhotosAlbum:fail cancel') {
							uni.showToast({
								title: '保存失败，请重新下载',
								icon: 'none'
							})
							return
						}
						uni.showModal({
							content: '保存失败，是否开启相册权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											let settingName =  'scope.writePhotosAlbum'
											// #ifdef MP-TOUTIAO
											settingName = 'scope.album'
											// #endif
											console.log(res.authSetting,settingName, res.authSetting[settingName])
											if (res.authSetting[settingName]) {
												uni.showToast({
													title: '授权成功',
													icon: 'none'
												})
											} else {
												uni.showToast({
													title: '授权失败',
													icon: 'none'
												})
											}
										}
									})
								}
							}
						})
					}
				})
			}
		})
		// #endif
		// #ifdef H5
		uni.showToast({
			title: '请长按图片保存',
			icon: 'none'
		})
		// #endif
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;

		.mask {
			--base-absolute-margin: 10vh;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			color: white;
			/* 关键属性：允许事件穿透 */
			pointer-events: none;

			&>view {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				width: fit-content;
			}

			.back {
				position: absolute;
				pointer-events: visible;
				top: 20rpx;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(0, 0, 0, .7);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.count {
				top: var(--base-absolute-margin);
				background: rgba(0, 0, 0, 0.3);
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 8rpx 28rpx;
				backdrop-filter: blur(10rpx);
			}

			.time {
				font-size: 140rpx;
				top: calc(var(--base-absolute-margin) + 80rpx);
				font-weight: 100;
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.date {
				font-size: 34rpx;
				top: calc(var(--base-absolute-margin) + 250rpx);
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
			}

			.footer {
				pointer-events: visible;
				bottom: var(--base-absolute-margin);
				width: 70%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: rgba(255, 255, 255, .8);
				backdrop-filter: blur(20px);
				border-radius: 60px;
				box-shadow: 0 2rpx 0 rgba(0, 0, 0, .1);
				font-size: 20rpx;
				color: $text-font-color-3;

				&>view {
					text-align: center;
					padding: 25rpx;
					cursor: pointer;

					.text {
						margin-top: 10rpx;
					}
				}
			}
		}

	}

	.swiper {
		width: 100%;
		height: 100vh;

		.swiper-item {
			width: 100%;
			height: 100%;
		}

		.image {
			width: 100%;
			height: 100%;
		}
	}
</style>